// 创作中心
<template>
  <div class="Writerbox">
    <div class="writer-info">
      <WriteInfo :count="bookcount"/>
    </div>
  <div class="bookshow-box">
      <div class="edit-box">
        <el-button @click="uploadWork" v-if="Username==writer_account">新建作品</el-button>
      </div>
      <BookEdit :isCreate="iscreate"  v-model:bookcount="bookcount"/>
    </div>
    <UploadWork v-model:isDialogVisible="isDialogVisible"  v-model:iscreate="iscreate" />
  </div>
</template>

<script setup>
import { ref, onMounted,getCurrentInstance,computed} from 'vue';
import { ElMessage } from 'element-plus';
import UploadWork from './WriterComponents/createWork.vue'
import BookEdit from './WriterComponents/changeWork.vue'
import WriteInfo from './WriterComponents/WriterInfo.vue'
import {useRoute} from 'vue-router'
// 定义数据

const route = useRoute();
const writer_account=computed(() => route.params.username);
const Username = ref(localStorage.getItem('account'));

const isDialogVisible = ref(false)
const {proxy}=getCurrentInstance()
const iscreate=ref(false);
const bookcount=ref()
// 新建作品
const uploadWork =  () =>{
  isDialogVisible.value=true;
};
onMounted(()=>{
  console.log('999999999999999',bookcount.value)
})
</script>

<style scoped>
    .Writerbox {
        width: 100%;
    }
  
    .bookshow-box{
        background-color: white;
        width: 97%;
        height:60vh;
        border-radius: 10px;
        margin-top: 2%;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        border: 1px solid rgba(255, 255, 255, 0.6);
        box-shadow: 2px 1px 19px rgba(0, 0, 0, 0.1);
    } 

    .edit-box{
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        height: 9%;
        width: 100%;
        background-color: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .edit-box .el-button{
        margin-right:25px;
        border-radius: 4px;
    }

</style>